<%@ taglib prefix="c" uri="/WEB-INF/tlds/hdiv-c.tld"%>
<%@ page contentType="text/html;charset=windows-1252"%>

<style type="text/css">
/* menu styles */
#jsddm
{	margin: 0px;
	padding: 0px 0px;
        z-index:2;
        position:absolute;
        }

	#jsddm li
	{	float: left;
		list-style: none;
		font: 12px Tahoma, Arial;
                align: center}
        #jsddm li img
        {       display:block;
                background: #B5BED6;
                padding: 0px 0px;
                text-decoration: none;
                white-space: nowrap}
	#jsddm li a
	{	display: block;
		background: #B5BED6;
		padding: 5px 12px;
		text-decoration: none;
		border-right: 1px solid white;
		white-space: nowrap
                font-size: 10px;
                COLOR: #FFFFFF;}

	#jsddm li a:hover
	{text-decoration: underline;}
		
		#jsddm li ul
		{	margin: 0;
			padding: 0;
			position: absolute;
			visibility: hidden;
			border-top: 1px solid white}
		
			#jsddm li ul li
			{	float: none;
				display: inline;}
			
			#jsddm li ul li a
			{	width: auto;
				background: #B5BED6;
                                font-size: 10px;
                                COLOR: #324280;
                                padding: 2px 2px 2px 10px;
                                }
			
			#jsddm li ul li a:hover
                                text-decoration: underline;}
</style>
<!-- muestra menu-->

<script type="text/javascript">
var timeout         = 500;
var closetimer	    = 0;
var ddmenuitem      = 0;

$(function() { 
    $("div.menuImg")
        .mouseover(function() { 
            if($(this).find('img').attr("src")){
                var src = $(this).find('img').attr("src").match(/[^\.]+/);
                src = $(this).find('img').attr("src").match(/[^\.]+/) + "_on.gif";
                $(this).find('img').attr("src", src); 
            }
        })
        .mouseout(function(){
            if($(this).find('img').attr("src")){
                var src = $(this).find('img').attr("src").replace("_on", ""); 
                $(this).find('img').attr("src", src);
            }
        })
}); 


function jsddm_open()
{	jsddm_canceltimer();
	jsddm_close();        
	ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');
 }

function jsddm_close()
{	
   if(ddmenuitem)ddmenuitem.css('visibility', 'hidden');
      
}

function jsddm_timer()
{	closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{	if(closetimer)
	{	window.clearTimeout(closetimer);
		closetimer = null;}}

$(document).ready(function()
{	$('#jsddm > li').bind('mouseover', jsddm_open);
	$('#jsddm > li').bind('mouseout',  jsddm_timer);
        
        $('#jsddm li ul').bgiframe();
});

document.onclick = jsddm_close;

</script>
<table width="775" cellspacing="0" cellpadding="0" align="center" border="0" bgcolor="#FFFFFF">
    <tr>
        <td>
        <ul id="jsddm">
	<li align="center"><div class="menuImg"><img src="images/menu/menu01.gif" height="24" width="159"/>
		<ul style="width: 159px">                
                <c:if test="${not empty listaMenu1}">
                    <c:forEach var="deno" items="${listaMenu1}" >
                        <c:set var="extension" value="html"/>
                        <c:if test="${deno.codOpci eq 'HMF2004' or deno.codOpci eq 'HMF2005'}" >
                            <c:set var="extension" value="html"/>                            
                        </c:if>
                        <li class="menuImg"><a href="<c:url value="mostrar${deno.codOpci}.${extension}"/>">
                                <c:out value="${deno.desOpci}"/></a></li>
                    </c:forEach>
                </c:if>
		</ul>
                </div>
	</li>
	<li align="center"><div class="menuImg"><img src="images/menu/menu02.gif" height="24" width="156"/>
		<ul style="width: 156px">
                <c:if test="${not empty listaMenu2}">
                    <c:forEach var="deno" items="${listaMenu2}" >
                        <li><a href="<c:url value="mostrar${deno.codOpci}.html"/>">
                                <c:out value="${deno.desOpci}"/></a></li>
                    </c:forEach>
                </c:if>
		</ul>
                </div>
	</li>
	<li align="center"><div class="menuImg"><img src="images/menu/menu03.gif" height="24" width="156"/>
                <ul style="width: 156px">
                <c:if test="${not empty listaMenu3}">
                    <c:forEach var="deno" items="${listaMenu3}" >
                        <li><a href="<c:url value="mostrar${deno.codOpci}.html"/>">
                                <c:out value="${deno.desOpci}"/></a></li>
                    </c:forEach>
                </c:if>
                </ul>
                </div>
        </li>
	<li align="center"><div class="menuImg"><img src="images/menu/menu04.gif" height="24" width="159"/>
                <ul style="width: 159px">
                <c:if test="${not empty listaMenu4}">
                    <c:forEach var="deno" items="${listaMenu4}" >
                        <li><a href="<c:url value="mostrar${deno.codOpci}.html"/>">
                                <c:out value="${deno.desOpci}"/></a></li>
                    </c:forEach>
                </c:if>
                </ul>
                </div>
        </li>
	<li align="center"><div class="menuImg"><img src="images/menu/menu05.gif" height="24" width="145"/>
                <ul  style="width: 145px">
                <li>
                    <table width="145" bgcolor="#E5E9F2">
                        <tr>
                            <td>
                               <font color="#324280" face="Arial" size="1">&nbsp;  Manual de Usuario</font> 
                            </td>
                        </tr>
                    </table>
                </li>
                <c:if test="${not empty listaMenu5}">
                    <c:forEach var="deno" items="${listaMenu5}" >
                        <li><a href="<c:url value="mostrar${deno.codOpci}.html"/>">
                                <c:out value="${deno.desOpci}"/></a></li>
                    </c:forEach>
                </c:if>
                <li>
                    <table width="145" bgcolor="#E5E9F2">
                        <tr>
                            <td>
                               <font color="#324280" face="Arial" size="1">&nbsp;  Demos</font> 
                            </td>
                        </tr>
                    </table>
                </li>
                <c:if test="${not empty listaMenu51}">
                    <c:forEach var="deno" items="${listaMenu51}" >
                        <li><a href="<c:url value="mostrar${deno.codOpci}.html"/>">
                                <c:out value="${deno.desOpci}"/></a></li>
                    </c:forEach>
                </c:if>
                </ul>
                </div>
        </li>
</ul>
        </td>
    </tr>
</table>